<template>
	<div>
		<div :class="$style.header">
			<div :class="$style.backicon" @click="back">
				<i class="iconfont icon-fanhui" />
			</div>
			<span :class="$style.title">模拟交易</span>
		</div>

		<div :class="$style.delegated">
			<img src="~assets/icons/hook-circle.png" alt="">
			<p>{{ tradetype === 'buy' ? '模拟交易已提交委托' : '模拟卖出已提交委托' }}</p>
		</div>

		<div :class="$style.info">
			<div :class="$style.time">
				<i class="iconfont text-big" style="color:#46BAED;">&#xe606;</i>
				{{ new Date().getHours() | fixTimeZero }}  : {{ new Date().getMinutes() | fixTimeZero }}
			</div>
			<div :class="$style.stock">
				<p :class="$style.name">{{ stockName }}</p>
				<p :class="$style.code">{{ market + code }}</p>
			</div>
			<div :class="$style.amount">
				<p :class="$style.price" v-show="showPrice">{{ price }}</p>
				<p :class="$style.number">
					{{ count }} 股
					<span
						:class="$style.tradetype"
						:style="{ color: tradetype === 'buy' ? '#FF3333' : '#40B5EB' }">{{ tradetype === 'buy' ? '买入' : '卖出' }}</span>
				</p>
			</div>
		</div>

		<div :class="$style.tiaoc">
			<img src="~assets/images/tiaoc.png" alt="">
		</div>

		<div :class="$style.reasons">
			<span v-for="(reason, index) in reasons" :class="$style.reason">
				<i class="iconfont" v-html="Constant.REASON_ICON_CODE[reason.icon]"></i>
				<span :style="{ color: reasonColors[index] }">{{ reason.text }}</span>
			</span>
		</div>

		<div :class="$style.more" @touchstart="touchStart" class="guide-reason-more" @click="toMoreReason">
			<router-link to="delegate-reason">更多原因</router-link>
		</div>

		<div :class="$style.confirm" @click="confirmDelegate">
			确认并查看委托
		</div>
	</div>
</template>

<script>
	import RemoteDAO from '../../../common/remoteDAO'
	import LocalDAO from '../../../common/localDAO'
	const Constant = require('../../../common/constant')

	export default {

		data () {
			const { query } = this.$route
			const { tradetype = 'buy' } = query

			return {
				tradetype,
				code: query.code || '',
				price: query.price || '',
				count: query.count || 0,
				reasonColors: ['#FF8C3F', '#46BAED', '#999'],
				Constant
			}
		},

		filters: {
			fixTimeZero (t) {
				return (t + '').length === 1 ? '0' + t : t
			}
		},

		computed: {
			stockName () {
				const { query } = this.$route
				const { tradetype = 'buy' } = query
				return tradetype === 'buy'
					? this.$store.state.buyStockName
					: this.$store.state.sellStockName
			},
			market () {
				const { query } = this.$route
				const { tradetype = 'buy' } = query
				return tradetype === 'buy'
					? this.$store.state.buyStockMarket
					: this.$store.state.sellStockMarket
			},
			reasons () {
				const { query } = this.$route
				const { tradetype = 'buy' } = query
				if (tradetype === 'buy') {
					return this.$store.state.buyReasons.length === 0
						? Constant.BUY_DEFAULT_REASON : this.$store.state.buyReasons
				} else {
					return this.$store.state.sellReasons.length === 0
						? Constant.SELL_DEFAULT_REASON : this.$store.state.sellReasons
				}
			},
			showPrice () {
				const { query } = this.$route
				const { tradetype = 'buy' } = query

				if (tradetype === 'buy') {
					return this.$store.state.buyDelegateType === ''
						|| this.$store.state.buyDelegateType === '0'
						|| this.$store.state.buyDelegateType === '1'
				} else {
					return this.$store.state.sellDelegateType === '0'
						|| this.$store.state.sellDelegateType === '1'
						|| this.$store.state.sellDelegateType === ''
				}
			}
		},

		methods: {
			back () {
				const { query } = this.$route
				const { gameId = '' } = query

				this.$store.dispatch('clearTrade')
				if (gameId !== '') {
					this.$router.replace({ path: '/trade/gamecancel', query: { gameId } })
				} else {
					this.$router.replace({ path: '/trade/cancel' })
				}
			},

			confirmDelegate () {
				const { query } = this.$route
				const { reasons = [] } = this
				const { tradetype = 'buy', gameId = '' } = query
				const groupId = tradetype === 'buy' ? this.$store.state.buyGroupId : this.$store.state.sellGroupId
				const reason1 = reasons[0] ? reasons[0].icon + '|' + reasons[0].text : ''
				const reason2 = reasons[1] ? reasons[1].icon + '|' + reasons[1].text : ''
				const reason3 = reasons[2] ? reasons[2].icon + '|' + reasons[2].text : ''

				RemoteDAO.callJCL11137({
					client_id: LocalDAO.getUserCode(),
					"entrust_type": groupId === 'default' || groupId === '' ? 1 : 2,// 委托类型
		            "entrust_typeid": groupId === 'default' ? '' : groupId, // 组合ID
		            "entrust_no": query.entrust_no || '',
		            reason1,
		            reason2,
		            reason3
				}, resp => {
					if (resp.error === '0') {
						const decryptData = JSON.parse(decrypt.json2(resp.data))
						const { body = {} } = decryptData
						this.$store.dispatch('clearTrade')
						if (body.status == '0') {
							if (gameId !== '') {
								this.$router.replace({ path: '/trade/gamecancel', query: { gameId } })
							} else {
								this.$router.replace({ path: '/trade/cancel' })
							}
						}
					} else {
						this.$store.dispatch('setTip', { text: resp.data || '' })
					}
				})
			},

			touchStart () {},

			toMoreReason () {
				const { query } = this.$route
				const { tradetype = 'buy' } = query
				this.$router.push({ path: 'delegate-reason', query: {
					tradetype
				}})
			}
		},
		mounted(){
			//this.$store.dispatch('setGuide',{guideType:Constant.tutorial.REASON_MORE});
		}
	}
</script>

<style module lang="less">
	.header {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		height: 44px;
		background-image: url('assets/images/beijing_3x.jpg');
		background-size: cover;
		background-position: 0 0;
		text-align: center;
	}

	.title {
		color: #fff;
		font-size: 17px;
		line-height: 44px;
	}

	.tiaoc {
		text-align: center;
		margin-top: 28px;

		img {
			width: 70%;
		}
	}

	.reasons {
		text-align: center;
		font-size: 12px;
		margin-top: 30px;
	}

	.reason {
		display: inline-block;
		height: 22px;
		line-height: 22px;
		margin: 0 5px;
		color: #999;

		i {
			display: inline-block;
			font-size: 21px;
			vertical-align: middle;
		}

		span {
			display: inline-block;
			height: 22px;
			line-height: 22px;
			vertical-align: top;
		}
	}

	.more {
		color: #46BAED;
		background-color: #fff;
		text-align: center;
		font-size: 14px;
		border-top: 1px solid #EEE;
		border-bottom: 1px solid #EEE;
		padding: 8px;
		margin-top: 5px;
		background-image: url(assets/icons/right.png);
		background-repeat: no-repeat;
		background-size: 16px 16px;
		background-position: 97% center;


		&:active {
			background-color: #ECECEC;
		}
	}

	.confirm {
		background-color: #FDBB4A;
		color: #fff;
		font-size: 14px;
		padding: 10px;
		width: 80%;
		text-align: center;
		margin: 20px auto;
		border-radius: 999px;
	}

	.info {
		display: -webkit-box;
		position: relative;
		text-align: center;
		border-bottom: 1px solid #DDD;
		padding: 10px 0;

		&::before {
			position: absolute;
			content: '';
			left: 50%;
			top: -30px;
			margin-left: -15px;
			border: 15px solid transparent;
			border-bottom: 15px solid #F2F2F2;
		}
	}

	.time {
		color: #999;
		font-size: 21px;
		line-height: 40px;
	}

	.name {
		font-size: 16px;
		color: #3E3E3E;
	}

	.code {
		font-size: 12px;
		color: #C9C9C9;
	}

	.time, .stock, .amount {
		-webkit-box-flex: 1;
		width: 33%;

		p {
			margin: 0;
		}
	}

	.price {
		font-size: 14px;
		color: #FF3333;
	}

	.number {
		font-size: 14px;
		color: #999;
	}

	.delegated {
		font-size: 20px;
		color: #fff;
		text-align: center;
		padding: 10px 15px 13px 24px;
		background-image: url('assets/images/beijing_3x.jpg');
		background-repeat: no-repeat;
	    background-position: 0 -40px;
	    background-size: 100% 120%;

	    &::-webkit-scrollbar {
		    display: none;
		}

		p {
			margin-top: 10px;
			margin-bottom: 40px;
		}

		img {
			width: 20%;
			margin-top: 40px;
		}
	}

	.backicon {
		position: absolute;
	    line-height: 32px;
	    font-size: 20px;
	    width: 36px;
	    height: 36px;
	    text-align: center;
	    border-radius: 50%;
	    border: 1px solid #A4E3FF;
	    margin-top: 4px;
	    margin-left: 8px;
	    background-color: #3D90CD;

		i {
			font-size: 22px;
    		line-height: 36px;
    		color: #C5DFF0;
		}
	}
</style>
